<template>
    <div class="box">
        <el-card>
            <template #header>
                <h3>健康档案</h3>
            </template>
            <!-- 健康档案编辑态 -->
            <el-form v-if="show === 'edit'" :model="healthRecord" label-width="120px" :rules="rules"
                ref="healthRecordForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="user.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="身高" prop="height">
                    <el-input v-model="healthRecord.height" placeholder="cm"></el-input>
                </el-form-item>
                <el-form-item label="体重" prop="weight">
                    <el-input v-model="healthRecord.weight" placeholder="kg"></el-input>
                </el-form-item>
                <el-form-item label="血压" prop="bloodPressure">
                    <el-input v-model="healthRecord.bloodPressure" placeholder="高压-低压"></el-input>
                </el-form-item>
                <el-form-item label="心率" prop="heartRate">
                    <el-input v-model="healthRecord.heartRate" placeholder="次/分钟"></el-input>
                </el-form-item>
                <el-form-item label="体温" prop="temperature">
                    <el-input v-model="healthRecord.temperature" placeholder="℃"></el-input>
                </el-form-item>
                <el-form-item label="血型" prop="bloodType">
                    <el-input v-model="healthRecord.bloodType"></el-input>
                </el-form-item>
                <el-form-item label="过敏原" prop="allergies">
                    <el-input v-model="healthRecord.allergies"></el-input>
                </el-form-item>
                <el-form-item label="慢性疾病信息" prop="chronicConditions">
                    <el-input v-model="healthRecord.chronicConditions"></el-input>
                </el-form-item>
                <el-form-item label="当前用药情况" prop="currentMedications">
                    <el-input v-model="healthRecord.currentMedications"></el-input>
                </el-form-item>
                <el-form-item label="饮食习惯" prop="dietaryHabits">
                    <el-input v-model="healthRecord.dietaryHabits"></el-input>
                </el-form-item>
                <el-form-item label="运动习惯" prop="exerciseRoutine">
                    <el-input v-model="healthRecord.exerciseRoutine"></el-input>
                </el-form-item>
                <el-form-item label="是否吸烟" prop="smokingStatus">
                    <el-radio-group v-model="healthRecord.smokingStatus">
                        <el-radio :value="0">否</el-radio>
                        <el-radio :value="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否饮酒" prop="alcoholStatus">
                    <el-radio-group v-model="healthRecord.alcoholStatus">
                        <el-radio :value="0">否</el-radio>
                        <el-radio :value="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="睡眠情况" prop="sleepPatterns">
                    <el-input v-model="healthRecord.sleepPatterns"></el-input>
                </el-form-item>
                <el-form-item label="免疫接种记录" prop="immunizations">
                    <el-input v-model="healthRecord.immunizations"></el-input>
                </el-form-item>
                <el-form-item label="心理健康状况" prop="mentalHealth">
                    <el-input v-model="healthRecord.mentalHealth"></el-input>
                </el-form-item>
                <el-form-item label="最近体检日期" prop="lastPhysicalExam">
                    <el-date-picker v-model="healthRecord.lastPhysicalExam" type="date" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="备注" prop="notes">
                    <el-input v-model="healthRecord.notes" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
                </el-form-item>
                <!-- <el-form-item label="创建时间" prop="createdTime">
                    <el-date-picker v-model="healthRecord.createdTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                        disabled />
                </el-form-item> -->
                <!-- <el-form-item label="修改时间" prop="updatedTime">
                    <el-date-picker v-model="healthRecord.updatedTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                        disabled />
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="update">保存</el-button>
                </el-form-item>
            </el-form>

            <!-- 健康档案浏览态 -->
            <el-form v-if="show === 'browse'" :model="healthRecord" label-width="120px" :rules="rules"
                ref="healthRecordForm">
                <el-form-item label="姓名" prop="">
                    <p v-text="user.name"></p>
                </el-form-item>
                <el-form-item label="身高" prop="height">
                    <p v-text="healthRecord.height"></p>
                </el-form-item>
                <el-form-item label="体重" prop="weight">
                    <p v-text="healthRecord.weight"></p>
                </el-form-item>
                <el-form-item label="血压" prop="bloodPressure">
                    <p v-text="healthRecord.bloodPressure"></p>
                </el-form-item>
                <el-form-item label="心率" prop="heartRate">
                    <p v-text="healthRecord.heartRate"></p>
                </el-form-item>
                <el-form-item label="体温" prop="temperature">
                    <p v-text="healthRecord.temperature"></p>
                </el-form-item>
                <el-form-item label="血型" prop="bloodType">
                    <p v-text="healthRecord.bloodType"></p>
                </el-form-item>
                <el-form-item label="过敏原" prop="allergies">
                    <p v-text="healthRecord.allergies"></p>
                </el-form-item>
                <el-form-item label="慢性疾病信息" prop="chronicConditions">
                    <p v-text="healthRecord.chronicConditions"></p>
                </el-form-item>
                <el-form-item label="当前用药情况" prop="currentMedications">
                    <p v-text="healthRecord.currentMedications"></p>
                </el-form-item>
                <el-form-item label="饮食习惯" prop="dietaryHabits">
                    <p v-text="healthRecord.dietaryHabits"></p>
                </el-form-item>
                <el-form-item label="运动习惯" prop="exerciseRoutine">
                    <p v-text="healthRecord.exerciseRoutine"></p>
                </el-form-item>
                <el-form-item label="是否吸烟" prop="smokingStatus">
                    <p v-text="healthRecord.smokingStatus === 0 ? '否' : '是'"></p>
                </el-form-item>
                <el-form-item label="是否饮酒" prop="alcoholStatus">
                    <p v-text="healthRecord.alcoholStatus === 0 ? '否' : '是'"></p>
                </el-form-item>
                <el-form-item label="睡眠情况" prop="sleepPatterns">
                    <p v-text="healthRecord.sleepPatterns"></p>
                </el-form-item>
                <el-form-item label="免疫接种记录" prop="immunizations">
                    <p v-text="healthRecord.immunizations"></p>
                </el-form-item>
                <el-form-item label="心理健康状况" prop="mentalHealth">
                    <p v-text="healthRecord.mentalHealth"></p>
                </el-form-item>
                <el-form-item label="最近体检日期" prop="lastPhysicalExam">
                    <p v-text="healthRecord.lastPhysicalExam?.substring(0, 10)"></p>
                </el-form-item>
                <el-form-item label="备注" prop="notes">
                    <p v-text="healthRecord.notes"></p>
                </el-form-item>
                <!-- <el-form-item label="创建时间" prop="createdTime">
                    <p v-text="healthRecord.createdTime"></p>
                </el-form-item> -->
                <el-form-item label="修改时间" prop="updatedTime">
                    <p v-text="healthRecord.updatedTime?.substring(0, 10)"></p>
                </el-form-item>
                <el-form-item class="btn-item">
                    <el-button type="primary" @click="show = 'edit'" class="btn">修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { healthRecordFindAPI, healthRecordUpdateAPI } from '@/api/healthRecord';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            show: 'browse',
            healthRecord: {},
            user: JSON.parse(sessionStorage.getItem('user')),
            rules: {
                height: [
                    {
                        validator: (rule, value, callback) => {
                            if (!isNaN(value) && !isNaN(parseFloat(value)) && (value < 0 || value > 250)) {
                                callback(new Error('请输入合理的身高'));
                            } else if (!isNaN(value) && !isNaN(parseFloat(value)) || value === '') {
                                callback();
                            } else {
                                callback(new Error('身高必须为数字值'));
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                weight: [
                    {
                        validator: (rule, value, callback) => {
                            if (!isNaN(value) && !isNaN(parseFloat(value)) && (value < 0 || value > 250)) {
                                callback(new Error('请输入合理的体重'));
                            } else if (!isNaN(value) && !isNaN(parseFloat(value)) || value === '') {
                                callback();
                            } else {
                                callback(new Error('体重必须为数字值'));
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                bloodPressure: [
                    {
                        validator: (rule, value, callback) => {
                            const bloodPressureRegex = /^[0-9]{1,3}\-[0-9]{1,3}$/;
                            if (value !== '') {
                                if (bloodPressureRegex.test(value)) {
                                    callback();
                                } else {
                                    callback(new Error('请输入有效的血压格式，如：120-80'));
                                }
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                heartRate: [
                    {
                        validator: (rule, value, callback) => {
                            if (!isNaN(value) && !isNaN(parseFloat(value)) && (value < 30 || value > 250)) {
                                callback(new Error('请输入合理的心率'));
                            } else if (!isNaN(value) && !isNaN(parseFloat(value)) || value === '') {
                                callback();
                            } else {
                                callback(new Error('心率必须为数字值'));
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                temperature: [
                    {
                        validator: (rule, value, callback) => {
                            if (!isNaN(value) && !isNaN(parseFloat(value)) && (value < 30 || value > 50)) {
                                callback(new Error('请输入合理的体温'));
                            } else if (!isNaN(value) && !isNaN(parseFloat(value)) || value === '') {
                                callback();
                            } else {
                                callback(new Error('体温必须为数字值'));
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        update() {
            this.$refs.healthRecordForm.validate((val) => {
                if (val) {
                    healthRecordUpdateAPI(this.healthRecord).then((resp) => {
                        if (resp.data.code == 2000) {
                            this.healthRecord = resp.data.data;
                            ElMessage.success(resp.data.message);
                            this.show = 'browse';
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                }
            })
        }
    },
    created() {
        const user = JSON.parse(sessionStorage.getItem('user'));
        healthRecordFindAPI(user).then((resp) => {
            this.healthRecord = resp.data.data;
        })
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
}

.el-card {
    width: 600px;
}

@media (max-width: 768px) {
    .box {
        width: 100%;
        height: 100%;
    }

    .el-card {
        width: 90vw;
        height: 100%;
    }

    .btn-item {
        position: relative;
    }

    .btn {
        position: absolute;
        right: 0;
    }
}
</style>